<template>
  <div class="travel-view">
    <header class="header">
      <img src="LOGO.png" alt="School Logo" class="logo" />
      <h5 class="school-name">中国计量大学 - 嘉兴特色旅游景点</h5>
    </header>
    <main class="content">
      <h1 class="main-title">嘉兴旅游景点</h1>
      <section class="card-section">
        <!-- 南湖 -->
        <router-link to="/travel/nanhu" class="travel-card" @mouseover="hoveredCard = 1" @mouseleave="hoveredCard = 0">
          <img src="southlake.jpg" alt="南湖" class="card-image left"/>
          <div class="card-text">
            <h1 v-if="hoveredCard !== 1">南湖</h1>
            <h3 v-else>南湖</h3>
            <p v-if="hoveredCard !== 1">南湖是嘉兴的著名景点，湖水清澈，景色宜人，是游客休闲和游玩的好地方。</p>
            <p v-else>南湖是嘉兴的著名景点，湖水清澈，景色宜人，是游客休闲和游玩的好地方。</p>
          </div>
        </router-link>

        <!-- 西塘古镇 -->
        <router-link to="/travel/xitang" class="travel-card" @mouseover="hoveredCard = 2" @mouseleave="hoveredCard = 0">
          <div class="card-text">
            <h1 v-if="hoveredCard !== 2">西塘古镇</h1>
            <h3 v-else>西塘古镇</h3>
            <p v-if="hoveredCard !== 2">西塘是一个典型的江南水乡古镇，拥有丰富的历史文化和美丽的水道景观。</p>
            <p v-else>西塘是一个典型的江南水乡古镇，拥有丰富的历史文化和美丽的水道景观。</p>
          </div>
          <img src="xitang.jpg" alt="西塘古镇" class="card-image right"/>
        </router-link>

        <!-- 嘉兴盐仓 -->
        <router-link to="/travel/yancang" class="travel-card" @mouseover="hoveredCard = 3" @mouseleave="hoveredCard = 0">
          <img src="yancang.jpeg" alt="嘉兴盐仓" class="card-image left"/>
          <div class="card-text">
            <h1 v-if="hoveredCard !== 3">嘉兴盐仓</h1>
            <h3 v-else>嘉兴盐仓</h3>
            <p v-if="hoveredCard !== 3">嘉兴盐仓是中国历史悠久的盐商遗址之一，展示了盐业文化的丰富历史。</p>
            <p v-else>嘉兴盐仓是中国历史悠久的盐商遗址之一，展示了盐业文化的丰富历史。</p>
          </div>
        </router-link>

        <!-- 嘉兴天主堂 -->
        <router-link to="/travel/tianzhutang" class="travel-card" @mouseover="hoveredCard = 4" @mouseleave="hoveredCard = 0">
          <div class="card-text">
            <h1 v-if="hoveredCard !== 4">嘉兴天主堂</h1>
            <h3 v-else>嘉兴天主堂</h3>
            <p v-if="hoveredCard !== 4">嘉兴天主堂是一座具有意大利哥特式风格的西洋建筑。据称为远东第三大教堂。</p>
            <p v-else>嘉兴天主堂是一座具有意大利哥特式风格的西洋建筑。据称为远东第三大教堂。</p>
          </div>
          <img src="tianzhutang.jpg" alt="嘉兴天主堂" class="card-image right"/>
        </router-link>
      </section>
      <router-link to="/HomePage" class="back-button">返回</router-link> <!-- 返回按钮 -->
    </main>
    <footer class="footer">
      <p>版权所有 © 姓名: 陶诗莹, 学号: 2300303105, 电话: 15024340028, 邮箱: 2351922591@qq.com</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'TravelView',
  data() {
    return {
      hoveredCard: 0, // 当前悬停的卡片编号
    };
  },
};
</script>

<style scoped>
.travel-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #f8f8f8;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1em;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.logo {
  width: 50px;
  height: auto;
  margin-right: 0.5em;
}

.school-name {
  margin: 0;
  color: #333;
}

.content {
  flex: 1;
  padding-top: 6em;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 居中对齐 */
}

.main-title {
  font-size: 3em; /* 新增标题字体大小 */
  color: #333;
  margin: 0.5em 0.5em; /* 上下间距 */
  text-align: center; /* 居中对齐 */
}

.card-section {
  display: flex;
  flex-direction: column;
  gap: 0; /* 去掉间隙 */
  width: 100%; /* 占满全宽 */
}

.travel-card {
  display: flex;
  align-items: center;
  padding: 1em;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0; /* 卡片之间的分隔线 */
  text-decoration: none; /* 去掉下划线 */
}

.card-image {
  width: 400px; /* 默认宽度 */
  height: 600px; /* 默认高度 */
  border-radius: 10px;
  object-fit: cover; /* 保持图像的比例 */
  transition: all 0.3s ease; /* 动画效果 */
}

.travel-card:hover .card-image {
  width: 1000px; /* 鼠标悬停时的宽度 */
  height: 600px; /* 鼠标悬停时的高度 */
}

.card-image.left {
  margin-right: 1em; /* 右侧间距 */
}

.card-image.right {
  margin-left: 1em; /* 左侧间距 */
  margin-right: 0; /* 去掉右侧间距 */
}

.card-text {
  flex: 1; /* 填充剩余空间 */
  text-align: center; /* 居中对齐 */
}

.card-text h1 {
  font-size: 2.5em; /* H1字体大小调整为2.5em */
  color: #333;
  margin: 0.5em 0;
  transition: font-size 0.3s ease; /* 添加过渡效果 */
}

.card-text h3 {
  font-size: 1.5em; /* H3字体大小 */
  color: #333;
  margin: 0.5em 0;
  transition: font-size 0.3s ease; /* 添加过渡效果 */
}

.card-text p {
  font-size: 1.1em; /* 段落字体大小 */
  color: #666;
}

.back-button {
  margin: 2em 0; /* 上下间距 */
  padding: 1em 2em; /* 内边距 */
  background-color: #007bff; /* 按钮背景色 */
  color: #fff; /* 按钮文字颜色 */
  text-decoration: none; /* 去掉下划线 */
  border-radius: 5px; /* 圆角 */
}

.back-button:hover {
  background-color: #0056b3; /* 悬停时的背景色 */
}

.footer {
  text-align: center;
  padding: 1em;
  background-color: #f0f0f0;
  color: #666;
  font-size: 0.85em;
}
</style>
